<template>
  <div>
    <h2>楼层人数情况</h2>
    <div id="three"  style="width: 500px;height:200px;">
      容纳后期的图表
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import http from "../util/api";
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
onMounted(() => {
  // 获取到标签
  var chartDom = document.getElementById('three')!;
  var myChart = echarts.init(chartDom);

  http('/chartDataThree').then((res: any) => {
    console.log(res);

    let xdata = res.data.map((val: any) => val.title)//楼
    let ydata = res.data.map((val: any) => val.num)//人数

    option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 967,
              name: '卫生'
            },
            {
              value: 183,
              name: '电梯'
            },
            {
              value: 800,
              name: '停车引导'
            },
            {
              value: 350,
              name: '水电'
            },
            {
              value: 150,
              name: '一般维修'
            },
            {
              value: 1000,
              name: '人员进出'
            },
            {
              value: 640,
              name: '外来人员到访'
            }
          ],
          roseType: 'area'
        }
      ]
    };
    option && myChart.setOption(option);
  })
})


</script>
<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}

/* ::v-deep h2{
    background-color: #999;

} */
#three {
  /* 高度360 */
   margin: 0 auto;
  height: 4.3rem;

  background-color: #785d5d;
}
</style>

